<template>
	<div class="header">
		<router-link 
		tag="div" 
		to="/" 
		class="header-abs"
		v-show="showAbs"
		>
			<span class="iconfont">&#xe624;</span>
		</router-link>
		<div 
		class="header-fiexd"
		v-show="!showAbs"
		:style="opacityStyle"
		>
			<router-link tag="div" to="/" >
				<span class="iconfont header-fiexd-back">&#xe624;</span>
			</router-link>
			景点详情
		</div>
	</div>
</template>
<script>
export default{
	data(){
		return{
			showAbs:true,
			opacityStyle:{
				opacity:0
			}
		}
	},
	methods:{
		handleScroll(){
			const top =document.body.scrollTop;
			// console.log(document.body.scrollTop)
			if(top>70){
				let opacity=(top/150);
				opacity=opacity >1 ? 1:opacity
				this.opacityStyle={
					opacity:opacity
				}
				this.showAbs=false;
			}else{
				this.showAbs=true;
			}
		}
	},
	deactivated(){
		window.removeEventListener('scroll',this.handleScroll)
	},
	activated(){
		window.addEventListener('scroll',this.handleScroll)
	},
	deactivated(){
		window.removeEventListener('scroll',this.handleScroll)
	}

}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/base.scss';
.header-abs{
	position: absolute;
	left:.2rem;
	top:.2rem;
	width:.8rem;
	height:.8rem;
	border-radius: .4rem;
	background:rgba(0,0,0,.8);
	color:#fff;
	text-align: center;
	line-height: .8rem;
}
.header-fiexd{
	position: fixed;
	top:0;
	left:0;
	right:0;
	height:1rem;
	line-height: 1rem;
	background:$bgColor;
	z-index:101;
	text-align: center;
	color:#fff;
	font-size: .32rem;
}
.header-fiexd-back{
	position: absolute;
	top:0;
	left:.2rem;

}
</style>